<template>
	<sysJk :label="'1.火灾报警控制器（联动型）手动自动状态切换'" showBack :withoutTop="true" :leftTime="120">
		<template v-slot:content>
			<view class="warp" id="warp"  @touchmove.stop="()=>{}">
				<view class="taskTit" style="width:100%;font-size: 2.5vh;" v-if="examType==1">
					{{questionList[showQuestion-1]}}
				</view>
				<view class="taskTit" style="width:100%;font-size: 2.5vh;" v-else>
					{{testQuestionList[showQuestion-1]}}
				</view>
				<view class="innerConetent" style="width:100%;height:100%;position: relative;">
					<image :src="bUrl"  style="width:100%;height:100%;display: block;"></image>
					<view class="myCard" id="myCard">
						<view class="cardContent">
							<image v-if="picIndex==2&&handleByAutoFlag" class="maskLight" style="position: absolute;" :src="requestUrl+'/static/image/green.png'" :style="{left:425*widthBl+'px',top:355*heightBl+'px',width:30*widthBl+'px',height:30*heightBl+'px'}"></image>
							<image v-if="picIndex==2&&!handleByAutoFlag" class="maskLight" style="position: absolute;" :src="requestUrl+'/static/image/back.png'" :style="{left:425*widthBl+'px',top:355*heightBl+'px',width:30*widthBl+'px',height:30*heightBl+'px'}"></image>
							<image v-if="picIndex==2&&handleBySelfFlag" class="maskLight" style="position: absolute;" :src="requestUrl+'/static/image/green.png'" :style="{left:425*widthBl+'px',top:390*heightBl+'px',width:30*widthBl+'px',height:30*heightBl+'px'}"></image>
							<image v-if="picIndex==2&&!handleBySelfFlag" class="maskLight" style="position: absolute;" :src="requestUrl+'/static/image/back.png'" :style="{left:425*widthBl+'px',top:390*heightBl+'px',width:30*widthBl+'px',height:30*heightBl+'px'}"></image>
							<view class="handleBtn">
								<!-- <u-button color="#1E90FF	" custom-style="width:100rpx;height:30rpx;border-radius:10rpx;margin-right:10px" @tap="lastTask">上一题</u-button> -->
								<u-button :custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'green',color:'#fff',fontSize:'3vh'}" v-if="examType==1" @click="showFlag=true">查看解析</u-button>
								<!-- <u-button color="#1E90FF	" custom-style="width:100rpx;height:30rpx;border-radius:10rpx;margin-right:10px" @tap="nextTask">下一题</u-button> -->
							</view>
							<view class="btnArea">
								<u-button :custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}" @click="handle">提交</u-button>
								<u-button :custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}" @click="redo">重做</u-button>
								<u-button :custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}" @click="goBack">返回</u-button>
							</view>
							<view class="writeBox" id="writeBox" v-if="picIndex==1" :style="{left:writeBoxLeft,top:writeBoxTop,width:'auto',height:'auto'}" @tap="showDialog">
								<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image>
							</view>
							<view class="writeBox" id="closeBox" v-if="picIndex==2||picIndex==3" :style="{right:30*widthBl+'px',top:30*heightBl+'px'}" @tap="back1">
								<image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px"></image>
							</view>
							<view class="writeBox" v-if="picIndex==2" id="timeBox" :style="{left:380*widthBl+'px',top:90*heightBl+'px',width:215*widthBl+'px',height:75*heightBl+'px'}" @tap="showDialog" style="text-align: center;">
								<text style="color:red">{{showTime}}</text> 
							</view>
							<view class="showInfoBox" id="showInfoBox" v-if="picIndex==2" :style="{left:showInfoBox.left,top:showInfoBox.top,width:510*widthBl+'px',paddingTop:30*heightBl+'px'}" @tap="showDialog">
								<view class="" style="display: flex;justify-content: space-between;">
									<view class="" :style="{width:350*widthBl+'px',textAlign:'center',height:200*heightBl+'px',lineHeight:200*heightBl+'px',fontSize:'1.5vh'}">
										正常监控状态
									</view>
									<view class="" :style="{width:150*widthBl+'px',height:200*heightBl+'px',padding:10*widthBl+'px',boxSizing:'border-box',paddingBottom:0}" style="display:flex;flex-direction:column;justify-content: space-between;">
										<view class="" :style="{height:80*heightBl+'px'}">
											<view class="">
												正常 运行
											</view>
											<view class="">
												手动： {{handleBySelfFlag?'允许':'禁止'}}
											</view>
											<view class="">
												自动：{{handleByAutoFlag?'允许':'禁止'}}
											</view>
										</view>
										<view class="" id="timechangeBox" style="font-size: 1vh;text-align: center;color:#fff">
											<view class="dateInfo">
												{{formatTime(new Date(),'yyyy-MM-dd')}}
											</view>
											<view class="timeInfo">
												{{changedTime}}
											</view>
										</view>
									</view>
								</view>
								<view class="" style="font-size:1.5vh;color:#fff">
									F1查火警 F2查启动 F3查故障 F4查监管 F5查屏蔽 F6查反馈 
								</view>
							</view>
							<view class="handleBySelf handleAction" :style="{width:80*widthBl+'px',height:40*heightBl+'px',left:1620*widthBl+'px',top:470*heightBl+'px'}" @tap="changeFlag(1)" v-if="picIndex==2&&(showQuestion==2||showQuestion==4)">
								
							</view>
							<view class="handleByAuto handleAction" :style="{width:80*widthBl+'px',height:40*heightBl+'px',left:1620*widthBl+'px',top:540*heightBl+'px'}" @tap="changeFlag(2)" v-if="picIndex==2&&(showQuestion==2||showQuestion==4)">
								
							</view>
							<view class="answerBox"  v-if="showQuestion==1||showQuestion==3" :style="{width:345*widthBl-35+'px'}">
								<view class="answerTit">
									请判断火灾报警器的控制方式
								</view>
								<view class="answerSelect">
									
									<radio-group @change="onChange" >
													<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value" style="display: flex;margin-bottom: 5px;align-items: center;">
														<view>
															<radio :value="item.value" :checked="result==item.value" :style="{transform:'scale('+heightBl+')'}"/>
														</view>
														<view>{{item.name}}</view>
													</label>
									</radio-group>
								</view>
							</view>
						</view>
					</view>
					
					
				</view>
				
				<u-mask :show="showFlag" @click="onClickHide">
				  <view class="wrapper" style="display: flex;align-items: center;justify-content: center;height:100%">
				    <view class="block" style="width:400rpx;padding: 20rpx;box-sizing:border-box;background: #fff;font-size:2vh">
				    	<view class="overtitle">
				    		【试题解析】 正确答案
				    	</view>
				    	<view class="overtitle">
				    		{{analysList[showQuestion-1]}}
				    	</view>
						<view class="overtitle" v-if="showQuestion==1">
							正确答案：自动禁止，手动允许
						</view>
						<view class="overtitle" v-if="showQuestion==3">
							正确答案：自动禁止，手动禁止
						</view>
				    </view>
				  </view>
				</u-mask>
			</view>

		</template>
	</sysJk>

</template>

<script>
	import sysJk from '@/components/sysJk.vue'
	import {fzQuestion} from '@/globalApi/requestApi.js'
	import {formatTime} from '@/util/index.js'
	const app = getApp();
	const baseUrl = app.globalData.requestUrl;
	export default {
		components: {
			sysJk
		},
		data() {
			
				
			return {
				// widthBl:0,
				// heightBl:0,
				allScore:0,
				formatTime,
				examType:1,
				handleBySelfFlag:true,
				handleByAutoFlag:false,
				writeBox:{width:0,height:0},
				writeBoxLeft:0,
				writeBoxTop:0,
				widthBl:null,
				heightBl:null,
				showFlag:false,
				showQuestion:1,
				showInfoBox:{
					left:0,
					top:0
				},
				questionList:[
					'【1/4】请判断火灾报警控制器的控制方式',
					'【2/4】请将火灾报警控制器切换为自动允许，手动禁止状态',
					'【3/4】请判断火灾报警控制器的控制方式',
					'【4/4】请将火灾报警控制器切换为自动禁止，手动允许状态'
				],
				testQuestionList:[
					'【1/2】请判断火灾报警控制器的控制方式',
					'【2/2】请将火灾报警控制器切换为自动允许，手动禁止状态',
				],
				requestUrl:baseUrl,
				bUrl:baseUrl+"/static/image/jk/6-1.jpg",
				picIndex:1,
				items:[
					{
						value:"自动禁止，手动禁止",
						checked:false,
						name:"自动禁止，手动禁止",
					},
					{
						value:"自动允许，手动禁止",
						checked:false,
						name:"自动允许，手动禁止",
					},
					{
						value:"自动允许，手动允许",
						checked:false,
						name:"自动允许，手动允许",
					},
					{
						value:"自动禁止，手动允许",
						checked:false,
						name:"自动禁止，手动允许",
					}
					
				],
				analysList:[
					'看右上角小屏幕选答案',
					'按键区右上角有切换按钮',
					'看右上角小屏幕选答案',
					'按键区右上角有切换按钮',
				],
				result:null,
				isCorrect:true,
				showDate:null,
				showTime:null,
				changedTime:null,
			}
		},
		onLoad(options){
			this.examType = options.examType
			// var writeBox = uni.createSelectorQuery().in(this).select('#writeBox')
			// writeBox.boundingClientRect(data => {
			// this.writeBox = data
			// }).exec()
			
		},
		onShow() {
			this.createTime()
		},
		onReady() {
				this.drawWhiteBox()
		},
		methods: {
			createTime(){
				// this.showTime=this.formatTime(new Date(),'yy/MM/dd HH:mm:ss')
				let that = this
				// this.showTime = this.formatTime(new Date(),'HH:mm')
				this.showDate = this.formatTime(new Date(),'yy/MM/dd HH:mm:ss')
				setInterval(function(){
						that.showTime = that.formatTime(new Date(),'HH:mm')
						that.changedTime = that.formatTime(new Date(),'HH:mm:ss')
				},1000)
			},
			redo(){
				if(this.showQuestion==1||this.showQuestion==3){
					this.result = null
					
				}else if(this.showQuestion==2){
					this.handleBySelfFlag=true
					this.handleByAutoFlag=false
				}else{
					this.handleBySelfFlag=false
					this.handleByAutoFlag=true
				}
				this.bUrl=baseUrl+"/static/image/jk/6-1.jpg"
				this.picIndex=1
			},
			back1(){
				this.bUrl = baseUrl + "/static/image/jk/6-1.jpg"
				this.picIndex = 1
			},
			goBack(){
				uni.navigateBack()
			},
			handle(){
				let that = this
				this.$showModal2({
					title: '确认提交？',
					// content: '这是一个模态弹窗',
					
				}).then(res=>{
					
							let handleData = {
								fz_id: that.examId,
								title: that.showQuestion==1?'请判断火灾报警控制器的控制方式':'请将火灾报警控制器切换为自动允许，手动禁止状态',
								no: '6-'+that.showQuestion==1,
								question_type: 1,
								user_answer: that.result,
								answer: '',
								is_correct: that.isCorrect,
								score:0,
								start_time: '',
								end_time: '',
								question_answer: ''
							}
							if(that.showQuestion==1){
								if(that.result=='自动禁止，手动允许'){
									handleData.score = 1.5
									handleData.is_correct = true
								}else{
									handleData.score = 0
									handleData.is_correct = false
								}
								
							}else if(that.showQuestion==2){
								if(that.handleByAutoFlag&&!that.handleBySelfFlag){
									handleData.score = 1
									handleData.is_correct = true
								}else{
									handleData.score = 0
									handleData.is_correct = false
								}
							}
							if((that.showQuestion==1||that.showQuestion==3)&&!that.result){
								uni.showToast({
									title:'请选择答案',
									icon:'none'
								})
								return
							}
							fzQuestion(handleData).then(res => {
								if (res.code == 200) {
									that.allScore+=handleData.score
									that.result = null
									if(that.examType==1){
										if (that.showQuestion == 1) {
											that.showQuestion += 1
											that.bUrl = baseUrl + "/static/image/jk/6-1.jpg"
											that.picIndex = 1
											that.handleByAutoFlag = false
											that.handleBySelfFlag = true
										}else if (that.showQuestion == 2) {
											that.showQuestion += 1
											that.bUrl = baseUrl + "/static/image/jk/6-1.jpg"
											that.picIndex = 1
											that.handleByAutoFlag = false
											that.handleBySelfFlag = false
										}else if (that.showQuestion == 3) {
											that.showQuestion += 1
											that.bUrl = baseUrl + "/static/image/jk/6-1.jpg"
											that.picIndex = 1
											that.handleByAutoFlag = true
											that.handleBySelfFlag = false
										}
										
										else if (that.showQuestion == 4) {
											let pages = getCurrentPages()
											let prevPage = pages[pages.length -2] 
											prevPage.$vm.status1 = true
											prevPage.$vm.addScore(that.allScore)
											uni.navigateBack()
										}
									}else{
										if (that.showQuestion == 1) {
											that.showQuestion += 1
											that.bUrl = baseUrl + "/static/image/jk/6-1.jpg"
											that.picIndex = 1
											that.handleByAutoFlag = false
											that.handleBySelfFlag = true
										}else{
											let pages = getCurrentPages()
											let prevPage = pages[pages.length -2] 
											prevPage.$vm.status1 = true
											prevPage.$vm.addScore(that.allScore)
											uni.navigateBack()
										}
									}
									
								}
							})
						
				});
			},
			onChange(e){
				this.result = e.detail.value
			},
			changeFlag(type){
				if(type==1){
					this.handleBySelfFlag = !this.handleBySelfFlag
				}else{
					this.handleByAutoFlag = !this.handleByAutoFlag
				}
			},
			showDialog(){
				// this.showFlag = true
				if(this.showQuestion==1){
					this.bUrl = baseUrl+"/static/image/jk/6-2.jpg"
				}else{
					this.bUrl = baseUrl+"/static/image/jk/6-4.jpg"
				}
				this.picIndex=2
			},
			onClickHide(){
				this.showFlag = false
			},
			drawWhiteBox(){
				let that = this
				var warp = uni.createSelectorQuery().in(this).select('#myCard') 
				warp.boundingClientRect(data => {
				 var widthBl = data.width/1920
					var heightBl = data.height/921
					this.widthBl = widthBl
					this.heightBl = heightBl
					this.writeBox.width = 100*widthBl+'px'
					this.writeBoxLeft = 710*widthBl+'px' 
					this.writeBoxTop = 450*heightBl+'px'
					this.writeBox.height = 100*heightBl+'px'
					this.showInfoBox.left = 1121*widthBl+'px'
					this.showInfoBox.top = 95*heightBl+'px'
				}).exec()
				
				// uni.getSystemInfo({
				// 	success: function(res) {
				// 		console.log(res)
				// 		
						
				// 	}
				// });
			},
			nextTask(){
				uni.navigateTo({
					url:'../jkG/jkG'
				})
			},
			lastTask(){
				uni.navigateBack()
			}
		}
	}
</script>


<style scoped lang="scss">
	.warp {
		height: 100%;
		box-sizing: border-box;
		position: relative;
		// padding: 22rpx 33rpx 38rpx 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background: #F6F6F6;
		.handleAction{
			// border:1px solid orange;
			// background:yellow;
			position: absolute;
		}
		.myCard {
			width: 100%;
		   height:100%;
			position: absolute;
			left:0;
			top:0;
			// border-radius: 20rpx;
			// overflow: hidden;
			// z-index: 1;

			.cardContent {
				// padding: 52rpx 58rpx 37rpx;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				position: relative;
				// z-index: 2;
				color: #fff;

				.moneyContent {
					margin-top: 54rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.moneyDetail {
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;

						.detailTit {
							font-size: 24rpx;
							font-weight: 400;
						}

						.detailVal {
							font-size: 55rpx;
							font-weight: bold;
							margin-top: 35rpx;
						}
					}

				}
				.taskTit{
					width:100%;
					text-align: left;
					background: #fff;
					color:#000
				}
				.handleBtn{
					position:fixed;
					left:30px;
					bottom:30px
				}
				.btnArea {
					margin-top: 160rpx;
					//margin-left: 150rpx;
					display: flex;
					justify-content: center;
					position:fixed;
					right:30px;
					bottom:30px
					// text-align: center;
				}
			}
		}

		.infoBox {
			width: 100%;
			padding: 14rpx 30rpx;
			margin-top: 33rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;

			.singleInfo {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;

				.info {
					flex: 1;

					.desc {
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
					}

					.time {
						margin-top: 15rpx;
						font-size: 18rpx;
						font-weight: 400;
						color: #888888;
						display: flex;
						align-items: center;
					}
				}

				.val {
					width: 115rpx;
					height: 40rpx;
					border: 1rpx solid #DA2627;
					border-radius: 40rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #DA2627;
					line-height: 40rpx;
				}
			}
		}
		.writeBox{
			// border:1px solid green;
			width:100px;
			height:100px;
			position:absolute; 
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.answerBox{
			position: absolute;
			left:35px;
			top:0%;
			background: #fff;
			color:#000;
			// width:20%;
			font-size: 2vh;
			.answerTit{
				background:orange;
			}
		}
		.answerSelect{
			padding:10px 0;
			box-sizing: border-box;
		}
		.showInfoBox{
			position: absolute;
			// background: #fff;
			color:#000;
			font-size: 1.5vh;
		}
	}
</style>